<template>
    <div v-if="visible" class="dialog-wrapper">
        <!-- 遮罩层 -->
        <div class="dialog-mask" @click.self="handleMaskClick"></div>
        <!-- 弹窗容器 -->
        <div class="dialog-container" :style="containerStyle">
            <!-- 弹窗头部 -->
            <div class="dialog-header">
                <span class="dialog-title">{{ title }}</span>
                <div class="dialog-header-buttons">
                    <button v-if="showClose" class="dialog-close-btn" @click="closeDialog">×</button>
                </div>
            </div>
            <!-- 弹窗内容 -->
            <div class="dialog-body">
                <slot></slot>
            </div>
            <!-- 弹窗底部（自定义插槽） -->
            <div class="dialog-footer">
                <slot name="footer"> </slot>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed, defineProps, defineEmits, watch, ref, onMounted, onUnmounted } from 'vue'

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: ''
    },
    width: {
        type: String,
        default: '60%'
    },
    fullscreen: {
        type: Boolean,
        default: false
    },
    showClose: {
        type: Boolean,
        default: true
    },
    closeOnClickMask: {
        type: Boolean,
        default: true
    }
})

const emit = defineEmits(['update:modelValue', 'closed', 'opened'])

const visible = ref(props.modelValue)

// 监听 props.modelValue 变化
watch(() => props.modelValue, (newVal) => {
    visible.value = newVal
    if (newVal) emit('opened')
})

// 样式控制
const containerStyle = computed(() => {
    if (props.fullscreen) {
        return {
            width: '100%',
            height: '100%',
            margin: '0',
            borderRadius: '0',
            top: '0',
            left: '0',
            position: 'fixed'
        }
    }

    return {
        width: props.width,
        height: 'auto',
        top: '30%',
        left: '50%',
        transform: 'translate(-50%, -30%)',
        borderRadius: '8px',
        maxHeight: '90vh',
        position: 'fixed'
    }
})

// 关闭弹窗
const closeDialog = () => {
    visible.value = false
    emit('update:modelValue', false)
    emit('closed')
}

// 点击遮罩关闭
const handleMaskClick = () => {
    if (props.closeOnClickMask) {
        closeDialog()
    }
}

// 键盘 ESC 关闭
const handleKeyUp = (e) => {
    if (e.key === 'Escape') {
        closeDialog()
    }
}

onMounted(() => {
    document.addEventListener('keyup', handleKeyUp)
})

onUnmounted(() => {
    document.removeEventListener('keyup', handleKeyUp)
})
</script>

<style lang="scss">
.dialog-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dialog-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 2001;
}

.dialog-container {
    position: relative;
    //   border: 1px solid #00f0ff;
    //   box-shadow: 0 0 20px #00f0ff;
    z-index: 2002;
    transition: all 0.3s ease-in-out;
    padding: 0;
    overflow: hidden;
}

.dialog-header {

    display: flex;
    height: 120px;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    background-image: url('@/assets/images/profile/students/框框上.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;

}


.dialog-header-buttons {
    display: flex;
    align-items: center;
    position: absolute;
    top: 10%;
    right: 2%;
}

.dialog-title {
    font-size: 18px;
    color: #00f0ff;
    font-weight: bold;
}

.dialog-close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
    transition: color 0.3s;
}

.dialog-close-btn:hover {
    color: #00d7cb;
}

.dialog-body {
    position: relative;
    color: #fff;
    width: 95%;
    margin: 0 auto;
    overflow-y: auto;
    min-height: 100px;
    border: 1px solid #00f0ff;
    padding: 20px;
    z-index: 1;
    box-sizing: border-box;
    margin-top: -35px;
    margin-bottom: -35px;
    // 背景设置
    // background-image: url('@/assets/images/profile/students/中间框.png');
    // background-repeat: no-repeat;
    // background-position: center;
    // background-size: cover;
    background-color: rgba(33, 82, 107, 0.7);
    border-radius: 20px;
    // 添加发光边框特效
    box-shadow: 0 0 10px #00f0ff, 0 0 2px #00f0ff, 0 0 2px #00f0ff;

}

.dialog-footer {
    text-align: right;
    height: 120px;
    background-image: url('@/assets/images/profile/students/框框.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}

/* 动画 */
.zoom-enter-active,
.zoom-leave-active {
    transition: all 0.3s ease;
    transform: scale(1);
    opacity: 1;
}

.zoom-enter-from,
.zoom-leave-to {
    transform: scale(0.8);
    opacity: 0;
}
</style>